<template>
  <el-timeline class="time-line">
    <el-timeline-item placement="top" v-for="(history, index) in historyList" :key="'h' + index" :color="theme">
      <el-card shadow="hover" class="t-l-card">
        <el-row class="t-l-c-item">
          <el-col :span="12">
            <span>登录时间: {{ getTime(history.loginTime)}}</span>
          </el-col>
          <el-col :span="12">
            <span>退出时间: {{ getTime(history.logoutTime) }}</span>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <span>登录IP: {{ history.loginIp }}</span>
          </el-col>
          <el-col :span="12">
            <span>登录地址: {{ history.loginAddress }}</span>
          </el-col>
        </el-row>
      </el-card>
    </el-timeline-item>
    <el-divider v-if="historyList.length < totalNum && pageIndex < 11" class="more-time-item" @click="getLoginLineHandle">更多登录记录</el-divider>
  </el-timeline>
</template>

<script>

  export default {
    name: "user-login-line",
    data() {
      return {
        // 用户历史登录记录列表
        historyList: [],
        // 当前展示页码
        pageIndex: 0,
        // 当前页显示个数
        pageSize: 10,
        // 当前博客数量
        totalNum: 0,
        // 按钮是否可被点击[false-可以被点击 true-不可被点击]
        buttonLoad: false,
      }
    },
    computed: {
      // 系统主题
      theme() {
        return this.$store.state.settings.theme
      }
    },
    methods: {
      // 初始化用户登录记录
      initUserLoginLineHandle() {
        if (this.historyList.length === 0) {
          this.getLoginLineHandle()
        }
      },
      // 分页获取用户历史登录记录
      getLoginLineHandle() {
        if (this.buttonLoad) {
          this.notify('info', '提示', '请求已发送')
        } else {
          // 按钮不可被点击
          this.buttonLoad = true

          this.$axios.$get('/sys/history-login/list', { params: { page: this.pageIndex + 1 }})
            .then(({ data:page }) => {
              ++this.pageIndex

              this.historyList.push(...page.list)
              this.totalNum = page.totalNum
            })
            .catch(() => {

            })
            .finally(() => {
              // 按钮恢复可点击
              this.buttonLoad = false
            })
        }
      },
      /**
       * 根据毫秒时间数字，将时间转换为‘yyyy-MM-dd HH:mm:ss’格式
       * @param {number} time 时间戳
       * @returns {string} 日期字符串
       */
      getTime(time) {
        let s = ''
        if (!time || time === -1) {
          return s
        }
        let date = new Date(time)
        s += date.getFullYear() + '-'
        let month = date.getMonth() + 1
        if (month < 10) {
          s += '0'
        }
        s += month + '-'
        let day = date.getDate()
        if (day < 10) {
          s += '0'
        }
        s += day + ' '
        let hour = date.getHours()
        if (hour < 10) {
          s += '0'
        }
        s += hour + ':'
        let minute = date.getMinutes()
        if (minute < 10) {
          s += '0'
        }
        s += minute + ':'
        let second = date.getSeconds()
        if (second < 10) {
          s += '0'
        }
        s += second
        return s
      }
    }
  }
</script>

<style scoped>
  .time-line {
    height: 320px;
    padding-left: 5px;
    overflow: auto;
  }
  .time-line .t-l-card {
    width: 500px;
  }
  .time-line .more-time-item {
    cursor: pointer;
  }
  .t-l-card .t-l-c-item {
    margin-bottom: 10px;
  }
  .t-l-card .t-l-c-item > span {
    margin-right: 7px;
  }
</style>
